<template>
  <el-dialog v-model="isModalOpen" width="30%" @close="handleClose" class="auth-modal" :close-on-click-modal="false">
    <template #header>
      <span class="title">登录</span>
    </template>
    <div>
      <el-form @submit.prevent="handleLogin">
        <el-form-item>
          <div class="label">手机号码</div>
					<div style="display: flex; align-items: center; justify-content: space-between;width:100%;">
						<el-input v-model.trim="loginData.mobile" placeholder="请输入手机号码" size="large"></el-input>
						<span v-if="loginByCode" @click="sendVerificationCode" style="width: 100px;text-align: right;color: #fff;cursor: pointer;">
							{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
						</span>
						</div>
        </el-form-item>
        <el-form-item>
          <div class="label" style="width:100%;">{{ loginByCode ? '验证码' : '密码' }}</div>
          <el-input v-if="loginByCode" v-model.trim="loginData.code" placeholder="请输入验证码" size="large"></el-input>
          <el-input v-else  type="password" v-model.trim="loginData.password" placeholder="请输入密码" size="large"></el-input>           
          <div class="code" @click="loginByCode = !loginByCode; loginData.password=''; loginData.code='';">{{ loginByCode ? '密码登录': '验证码登录'}}</div>
        </el-form-item>
        <el-form-item>
          <el-button class="red-btn" size="large" @click="handleLogin">登录</el-button>
        </el-form-item>
      </el-form>
      <el-link @click="go_register()" style="color: #fff;">还没有账号吗？注册</el-link>
    </div>
    <!-- <div v-else>
      <el-form @submit.prevent="handleRegister">
        <el-form-item>
          <div class="label">手机号码</div>
          <el-input v-model.trim="registerData.mobile" placeholder="请输入手机号码" size="large"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="label">密码</div>
          <el-input type="password" v-model="registerData.password" placeholder="请输入密码" size="large"></el-input>
        </el-form-item>        
        <el-form-item>
          <el-button class="red-btn" size="large" @click="handleRegister">注册</el-button>
        </el-form-item>
      </el-form>
      <el-link type="primary" @click="toggleForm()">已经有账号? 去登录</el-link>
    </div> -->
  </el-dialog>
</template>

<script setup>
import { ref, defineExpose, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

import { setCookie } from '../utils/cookies';
import emitter from '../utils/eventBus';
import { login, sendLoginSms } from '../api/pcApi';


const router = useRouter();

const loginByCode = ref(false);
const isModalOpen = ref(false);

const loginData = ref({
  mobile: '',
  password: '',
  code: ''
})

const countdown = ref(0);
const startCountdown = (seconds) => {
  countdown.value = seconds
  const interval = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(interval);
      countdown.value = 0; // 确保倒计时结束后countdown为0
    }
  }, 1000)
}

const sendVerificationCode = () => {
  if (!loginData.value.mobile) {
    ElMessage.error('请输入手机号');
    return
  }
  if (countdown.value > 0) return
  
  sendLoginSms({mobile:loginData.value.mobile}).then(() => {
    ElMessage.success('验证码已发送')
    startCountdown(60)
  }).catch((err) => {
    ElMessage.error(err);
  });
}

// change form
const go_register = () => {
  isModalOpen.value = false;
  router.push('/register')
};

const handleLogin = () => {
  login(loginData.value).then(res => {
    setCookie('token', res, 1) // 设置1天过期时间   
    handleClose()
    ElMessage.success('登录成功')
    window.location.reload();
  }).catch(err => {
    ElMessage.error(err.message || '登录失败')
  })
};

const handleShow = () => {
  isModalOpen.value = true;
};

const handleClose = () => {
  isModalOpen.value = false;
};

onMounted(() => {
  emitter.on('open-auth-modal', handleShow);
});

onUnmounted(() => {
  emitter.off('open-auth-modal', handleShow);
});

defineExpose({
  handleShow,
  handleClose
})
</script>

<style lang="less">
.auth-modal{
  background: #3C0000!important;
  border-radius: 16px!important;
  padding: 32px 32px 53px!important;
  .red-btn {
    background: #A30000;
    color: #fff;
    border: 0;
    border-radius: 50px;
    padding-top: 12px;
    padding-bottom: 12px;
    &:hover {
      background: #B30000;
      color: #fff;
    }    
  }
  .el-input__wrapper {
    border-radius: 30px!important;
    &:hover {
      border-color: #A30000!important;
    }
  }
  .el-form-item {
    margin-bottom: 10px!important;
  }
}
</style>
<style lang="less" scoped>
.auth-modal{
  .title{
    font-size: 24px;
    font-weight: 700;
		color: #fff;
  }
  .label {
    font-size: 16px;
    color: #fff;
    margin-bottom: 8px;
  }
  .code {
    width: -webkit-fill-available;
    margin-top: 10px;
    text-align: right;
    color: #fff;
    font-size: 14px;
		cursor: pointer;
  }
}
</style>